<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>selectMenu</title>
    <link rel="stylesheet" href="../styles/index.css">
    <link rel="stylesheet" href="../styles/bootstrap/bootstrap.min.css">
    <script src="../javascript/tool.js"></script>
    <script src="../javascript/base.js"></script>
    <script src="../javascript/base_drag.js"></script>
    <script src="../javascript/index.js"></script>
</head>
<body>
<div id="header">
    <div class="logo"><img src="../images/logo.png" alt=""></div>
    <div class="member">个人中心<span class="glyphicon glyphicon-chevron-down memberIcon"></span>
        <ul class="member_ul">
            <li><a href="#"><span class="glyphicon glyphicon-circle-arrow-right"></span>设置</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-circle-arrow-right"></span>换肤</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-circle-arrow-right"></span>帮助</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-circle-arrow-right"></span>退出</a></li>
        </ul>
    </div>
    <div class="reg">注册</div>
    <div class="login">登录</div>
</div>
<div id="reg">
    <h2><span class="glyphicon glyphicon-remove reg_close"></span>会员注册</h2>
    <form name="reg" action="">
        <dl>
            <dd>用 户 名：<input type="text" name="user" class="text">
                <span class="info infoUser">请输入用户名，2-20位，由字母、数字和下划线组成！</span>
                <span class="error errorUser">输入不合法，请重新输入！</span>
                <span class="succ succUser">可用</span>
            </dd>
            <dd class="pd">密&nbsp&nbsp&nbsp&nbsp 码：<input type="password" name="pass" class="text">
                <span class="info infoPass">
                    <p>安全级别：
                        <strong class="s s1">■</strong>
                        <strong class="s s2">■</strong>
                        <strong class="s s3">■</strong>
                        <strong class="s s4"></strong>
                    </p>
                    <p><strong class="q1" style="font-weight: normal;">○</strong> 6-20 个字符</p>
                    <p><strong class="q2" style="font-weight: normal;">○</strong> 只能包含大小写字母、数字和非空字符</p>
                    <p><strong class="q3" style="font-weight: normal;">○</strong> 大、小写字母、数字、非空字符，2种以上</p>
                </span>
                <span class="error errorPass">输入不合法，请重新输入！</span>
                <span class="succ succPass">可用</span>
            </dd>
            <dd>请 确 认：<input type="password" name="notpass" class="text">
                <span class="info infoNotPass">请再一次输入密码</span>
                <span class="error errorNotPass">密码不一致，请重新输入！</span>
                <span class="succ succNotPass">可用</span>
            </dd>
            <dd class="pd">提&nbsp&nbsp&nbsp&nbsp 问：<select name="ques">
                <option value="0">----请选择----</option>
                <option value="1">--您最喜欢吃的菜</option>
                <option value="2">--您的狗狗的名字</option>
                <option value="3">--您的出生地</option>
                <option value="4">--您最喜欢的明星</option>
            </select>
            </dd>
            <dd class="pd">回&nbsp&nbsp&nbsp&nbsp 答：<input type="text" name="ans" class="text">
                <span class="info infoAns">请输入回答，2-32位</span>
                <span class="error errorAns">回答不合法，请重新输入！</span>
                <span class="succ succAns">可用</span>
             </dd>
            <dd class="pd">邮&nbsp&nbsp&nbsp&nbsp 箱：<input type="text" name="email" class="text">
                <span class="info infoEmail">请输入电子邮件</span>
                <span class="error errorEmail">邮件不合法，请重新输入！</span>
                <span class="succ succEmail">可用</span>
            </dd>
            <dd class="pd birthday">生&nbsp&nbsp&nbsp&nbsp 日：<select name="year">
                <option value="0">-请选择-</option>
            </select>年
                <select name="month">
                    <option value="0">-请选择-</option>
                </select>月
                <select name="day">
                    <option value="0">-请选择-</option>
                </select>日
            </dd>
            <dd class="pd" style="height: 105px;"><span class="ps" style="vertical-align: 85px;">备&nbsp&nbsp&nbsp&nbsp 注：</span><textarea name="ps"></textarea></dd>
            <dd style="padding: 0 0 0 320px;">还可以输入200字</dd>
            <dd style="padding: 0 0 0 80px;"><input type="button" class="submit"></dd>
        </dl>
    </form>
</div>
<div id="login">
    <h2><span class="glyphicon glyphicon-remove" id="login_close"></span>网站登录</h2>
    <div class="user">账号: <input type="text" name="user" class="text"></div>
    <div class="pass">密码: <input type="password" name="pass" class="text"></div>
    <div class="button"><input type="button" class="submit" value=""></div>
    <div class="other">注册新用户 | 忘记密码？</div>
</div>
<div id="nav">
    <ul class="about">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul class="black">
        <li>首页</li>
        <li>博文列表</li>
        <li>精彩相册</li>
        <li>动感音乐</li>
        <li>关于我</li>
    </ul>
    <div class="nav_bg">
        <ul class="white">
            <li>首页</li>
            <li>博文列表</li>
            <li>精彩相册</li>
            <li>动感音乐</li>
            <li>关于我</li>
        </ul>
    </div>
</div>
<div id="main">
    <div id="sidebar">
        <h2>教育博文1</h2>
        <ul>
            <li><a href="#">靠自己95后女生被16所国外名校录取</a></li>
            <li><a href="#">00后的成长烦恼：压力巨大成隐形杀手</a></li>
            <li><a href="#">一年自学MIT的33门课程：疯狂学习方法</a></li>
            <li><a href="#">申请赴美读研人数下降5% 7年来首遇冷</a></li>
            <li><a href="#">西政“萌招聘秀出辣椒与美女被赞”</a></li>
        </ul>
        <h2>教育博文2</h2>
        <ul>
            <li><a href="#">靠自己95后女生被16所国外名校录取</a></li>
            <li><a href="#">00后的成长烦恼：压力巨大成隐形杀手</a></li>
            <li><a href="#">一年自学MIT的33门课程：疯狂学习方法</a></li>
            <li><a href="#">申请赴美读研人数下降5% 7年来首遇冷</a></li>
            <li><a href="#">西政“萌招聘秀出辣椒与美女被赞”</a></li>
        </ul>
        <h2>教育博文3</h2>
        <ul>
            <li><a href="#">靠自己95后女生被16所国外名校录取</a></li>
            <li><a href="#">00后的成长烦恼：压力巨大成隐形杀手</a></li>
            <li><a href="#">一年自学MIT的33门课程：疯狂学习方法</a></li>
            <li><a href="#">申请赴美读研人数下降5% 7年来首遇冷</a></li>
            <li><a href="#">西政“萌招聘秀出辣椒与美女被赞”</a></li>
        </ul>
    </div>
    <div id="index">

    </div>
    <div id="banner">
        <img src="../images/banner1.jpg" alt="轮播器第一张">
        <img src="../images/banner2.jpg" alt="轮播器第二张">
        <img src="../images/banner3.jpg" alt="轮播器第三张">
        <ul>
            <li>●</li>
            <li>●</li>
            <li>●</li>
        </ul>
        <span></span>
        <strong></strong>
    </div>
    <div id="photo">
        <dl>
            <dt><img xsrc="../images/big1.jpg" bigsrc="../images/big_1.jpg" src="../images/wait.jpg" alt="" class="wait_load"></dt>
            <dd>延迟加载图片</dd>
        </dl>
        <dl>
            <dt><img xsrc="../images/big2.jpg" bigsrc="../images/big_2.jpg" src="../images/wait.jpg" alt="" class="wait_load"></dt>
            <dd>延迟加载图片</dd>
        </dl>
        <dl>
            <dt><img xsrc="../images/big3.jpg" bigsrc="../images/big_3.jpg" src="../images/wait.jpg" alt="" class="wait_load"></dt>
            <dd>延迟加载图片</dd>
        </dl>
        <dl>
            <dt><img xsrc="../images/big4.jpg" bigsrc="../images/big_4.jpg" src="../images/wait.jpg" alt="" class="wait_load"></dt>
            <dd>延迟加载图片</dd>
        </dl>
        <dl>
            <dt><img xsrc="../images/big5.jpg" bigsrc="../images/big_5.jpg" src="../images/wait.jpg" alt="" class="wait_load"></dt>
            <dd>延迟加载图片</dd>
        </dl>
        <dl>
            <dt><img xsrc="../images/big6.jpg" bigsrc="../images/big_6.jpg" src="../images/wait.jpg" alt="" class="wait_load"></dt>
            <dd>延迟加载图片</dd>
        </dl>
        <dl>
            <dt><img xsrc="../images/big7.jpg" bigsrc="../images/big_7.jpg" src="../images/wait.jpg" alt="" class="wait_load"></dt>
            <dd>延迟加载图片</dd>
        </dl>
        <dl>
            <dt><img xsrc="../images/big8.jpg" bigsrc="../images/big_8.jpg" src="../images/wait.jpg" alt="" class="wait_load"></dt>
            <dd>延迟加载图片</dd>
        </dl>
        <dl>
            <dt><img xsrc="../images/big9.jpg" bigsrc="../images/big_9.jpg" src="../images/wait.jpg" alt="" class="wait_load"></dt>
            <dd>延迟加载图片</dd>
        </dl>
        <dl>
            <dt><img xsrc="../images/big10.jpg" bigsrc="../images/big_10.jpg" src="../images/wait.jpg" alt="" class="wait_load"></dt>
            <dd>延迟加载图片</dd>
        </dl>
        <dl>
            <dt><img xsrc="../images/big11.jpg" bigsrc="../images/big_11.jpg" src="../images/wait.jpg" alt="" class="wait_load"></dt>
            <dd>延迟加载图片</dd>
        </dl>
        <dl>
            <dt><img xsrc="../images/big12.jpg" bigsrc="../images/big_12.jpg" src="../images/wait.jpg" alt="" class="wait_load"></dt>
            <dd>延迟加载图片</dd>
        </dl>
    </div>
</div>
<div id="share">
    <h2>分享到</h2>
    <ul>
        <li><a href="#" class="a">一键分享</a></li>
        <li><a href="#" class="b">新浪微博</a></li>
        <li><a href="#" class="c">人人网</a></li>
        <li><a href="#" class="d">百度相册</a></li>
        <li><a href="#" class="e">腾讯朋友</a></li>
        <li><a href="#" class="f">豆瓣网</a></li>
        <li><a href="#" class="g" style="width: 100px">百度新首页</a></li>
        <li><a href="#" class="h">和讯微博</a></li>
        <li><a href="#" class="i">QQ空间</a></li>
        <li><a href="#" class="j">百度收藏</a></li>
        <li><a href="#" class="k">腾讯微博</a></li>
        <li><a href="#" class="l">开心网</a></li>
        <li><a href="#" class="m">百度贴吧</a></li>
        <li><a href="#" class="n">搜狐微博</a></li>
        <li><a href="#" class="o">QQ好友</a></li>
        <li><a href="#" class="p">更多...</a></li>
    </ul>
    <div class="share_footer"><a href="#">百度分享</a><span></span></div>
</div>
<div id="photo_big">
    <h2><span class="glyphicon glyphicon-remove reg_close"></span>图片预加载</h2>
    <div class="big">
        <img src="../images/big_loading.gif" alt="">
        <strong class="sl">&lt;</strong>
        <strong class="sr">&gt;</strong>
        <span class="left"></span>
        <span class="right"></span>
        <em class="index"></em>
    </div>
</div>
<div id="screen"></div>
</body>
</html>